<template>
  <div class="digital-cockpit">
    <!-- 顶部导航 -->
    <van-nav-bar
        title="订阅管理"
        left-arrow
        @click-left="goBack"
        class="nav-bar"
        right-text="能力配置"
        @click-right="CapabilityConfiguration"
    />
    <div
        class="subscription-card"
        v-for="(item, index) in subscriptions"
        :key="index"
    >
      <van-swipe-cell>
      <div class="card-top">
        <!-- API标签 -->
        <span class="api-badge">{{ showtype(item.type) }}</span>
        <!-- 订阅名称 -->
        <span class="card-title">{{ item.name }}</span>
      </div>
      <van-divider class="h-divider" />
      <!-- 订阅描述 -->
      <div class="card-desc">{{ item.description }}</div>
      <template #right>
        <van-button square type="danger" text="删除"  @click="remove(item)"/>
      </template>
      </van-swipe-cell>
    </div>


  </div>
</template>

<script>
import { getAction,postAction } from '@/api'
export default {
  name: "index",
  data() {
    return {
      subscriptions: [],
    }
  },
  mounted() {
   this.init()
  },
  methods:{
    init(){
      getAction('/sys/cockpithaveability/Querythelistofconfiguredcapabilities','').then(res=>{
        this.subscriptions=res.result
      })
    },
    // 删除订阅
    remove(item){
      postAction("/sys/cockpithaveability/removeconfiguredcapabilities",{id:item.id}).then(res=>{
        if (res.code !== 200) {
          this.$toast.fail('删除失败');
          return;
        }else {
          this.$toast.success('删除成功');
          this.init()
        }
      })
    },
    goBack() {
      // if(this.$route.params.mark=='能力助手') {
      //   let param = {
      //     activeTab: 2
      //   }
      //   this.$router.push({name: 'test', params: param})
      // }else{
      //   this.$router.go(-1)
      // }
      this.$router.go(-1)
    },
    showtype(val){
      if(val=='agent'){
        return 'Agent'
      }else{
        return 'API接口'
      }
    },
    CapabilityConfiguration(){
      this.$router.push({name: 'configuration'})
    },
  }
}
</script>

<style scoped>
::v-deep .van-nav-bar__content{
  background: #F4FCFF;
}
/deep/.van-divider{
  margin: 8px 0px 8px 0px;
}
/deep/.van-button--square {
  height: 100%;
}
.delete-button {
  height: 100%;
}
/deep/ .van-nav-bar__text{
  color: #27C2AD !important;
}
.digital-cockpit{
  background: linear-gradient(180deg, #F4FCFE, #fff);
  /*background-color: #f7f8fa;*/
  min-height: 100vh;
}
.subscription-card {
  margin: 12px;
  background-color: #ffffff; /* 卡片半透背景 */
  border: 1px solid #ffffff; /* 青绿色边框（半透） */
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px; /* 卡片之间的间距 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 实现左右布局 */
  flex-wrap: nowrap; /* 防止换行 */
  gap: 8px; /* 标签和标题之间的间距，可根据实际效果调整 */

}
.api-badge {
  background-color: orange; /* 金色标签背景 */
  color: #ffffff; /* 标签文字颜色 */
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.card-title {
  color: #000000;
  font-weight: 540;
  flex-grow: 1; /* 占据剩余空间 */
}
.card-desc {
  color: #8F959E;
  opacity: 0.8; /* 文字淡显效果 */
  line-height: 1.4;
}
.card-action {
  display: flex;
}

</style>
